<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_DETECTORMANAGE_ISOLATE_ADD"
});
import { ref, nextTick, h } from "vue";
import { useRouter } from "vue-router";
import { PxScrollbar, PxMessage, PxMessageBox } from "px-ui";
import { ArrowLeft } from "@px-ui/icons-vue";
import ReCollapse from "@/components/ReCollapse";
import ReTeleport from "@/components/ReTeleport";
import baseInfo from "./components/baseInfo.vue";
import isolateList from "./components/isolateList.vue";
import isolatedList from "./components/isolatedList.vue";
import { useThrottleFn } from "@vueuse/core";
import { throttleDelay as delay } from "@/utils/constant";
import { createDetectorIsolate, queryReminderContent } from "@/api/modules/operation";

const router = useRouter();

const baseInfoRef = ref<InstanceType<typeof baseInfo> | null>(null);
const isolateListRef = ref<InstanceType<typeof isolateList> | null>(null);
const baseInfoValue = ref<Record<string, any>>({});
const detectorChecklistDTOList = ref<Array<Record<string, any>>>([]);
const loading = ref<boolean>(false);
const isolatedListVisible = ref<boolean>(false);
const isolatedListData = ref<Array<any>>([]);

const cancelHandler = () => {
  const path = "/gas/operation/detectorManage/isolate";
  router.push({ path });
};

const submitHandler = useThrottleFn(async () => {
  PxMessageBox.confirm("确定将工单通知ERC吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const baseInfoValue = await baseInfoRef.value.validate();
    const detectorChecklistDTOList = await isolateListRef.value.validate();
    const params = { ...baseInfoValue, detectorChecklistDTOList };
    loading.value = true;
    const res = await createDetectorIsolate(params, () => {
      loading.value = false;
    });
    loading.value = false;
    if (!res?.id) return PxMessage.error("创建失败！");
    PxMessage.success("创建成功！");
    const { id } = res;
    loading.value = true;
    const re = await queryReminderContent({ id }, () => {
      loading.value = false;
    });
    loading.value = false;
    const { notifyContentList = [] } = re;
    isolatedListData.value = notifyContentList;
    if (notifyContentList?.length) {
      isolatedListVisible.value = true;
      // const d = notifyContentList.map(item => h("li", { style: { display: "block", marginBottom: "10px", color: "#555" } }, item));
      // PxMessageBox({
      //   title: "注意",
      //   customStyle: {
      //     maxWidth: "700px"
      //   },
      //   message: h(PxScrollbar, { style: { height: "320px" } }, h("ul", { style: {} }, d)),
      //   callback() {
      //     cancelHandler();s
      //   }
      // });
    } else {
      await nextTick();
      cancelHandler();
    }
  });
}, delay);
</script>

<template>
  <div v-loading="loading" class="detector-isolate-add">
    <div class="add-btn">
      <px-button type="primary" :icon="ArrowLeft" @click="cancelHandler">返回</px-button>
    </div>
    <div class="add-content">
      <div class="add-content-item add-content-baseinfo">
        <ReCollapse title="基础信息">
          <baseInfo ref="baseInfoRef" v-model="baseInfoValue" />
        </ReCollapse>
      </div>

      <div class="add-content-item add-content-list">
        <ReCollapse title="隔离清单">
          <isolateList ref="isolateListRef" v-model="detectorChecklistDTOList" />
        </ReCollapse>
      </div>
    </div>
    <ReTeleport submitText="通知" @cancel="cancelHandler" @submit="submitHandler" />
    <isolatedList v-if="isolatedListVisible" v-model="isolatedListVisible" v-model:list="isolatedListData" @submit="cancelHandler" />
  </div>
</template>

<style lang="scss" scoped>
.detector-isolate-add {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: #fff;

  .add-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;

    .add-content-item {
      width: 100%;
    }

    .add-content-baseinfo {
      // flex: 4;
    }

    .add-content-list {
      // flex: 3;
    }
  }
}
</style>
